<template>
<div id="homepageload">
    <ul>
        <li class="imageLi" v-for="(item,index) in shedatalist" >
            <figure>
                <router-link :to="{path:'/roominfo',query:{roomId:item.roomId}}">
                <!-- <img class="housePic" :src="item.thumbUrl" alt="The Pulpit Rock" width="100%"> -->
                <img class="housePic" :src="item.thumbUrl" alt="The Pulpit Rock" width="100%">
                </router-link>
                <figcaption class="picDescrip">
                    <div class="picLeft">
                        <p class="nameCN ellipsis">{{item.roomTitle}}</p>
                        <p class="nameEN ellipsis">{{item.roomTitleEn}}</p>
                    </div>
                    <!-- 关注 -->
                    <!-- <div class="picRight">
                        <i class="careIcon"><img src="../../assets/images/careIcon.png"  /></i>
                        48
                    </div> -->
                    <div class="picGeneral">
                        <i></i>
                        <span>{{item.houseTypeDesc}} {{item.houseType}}m<sup>2
                        </sup></span>
                    </div>
                </figcaption>
                <span class="price"><em>￥</em>{{item.price}}</span>
                <address class="address">{{item.locationTag}}</address>
            </figure>
        </li>
     </ul>
</div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import {
        Lazyload
    } from 'mint-ui';
    import Vue from 'vue';
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex';
    Vue.use(Lazyload);
    export default {
        name: 'homepageload', //组件的名字
        props: {
            shedatalist: {
                type: Array,
                default: []
            }
        },
        data() {
            return { //数据
                msg: 'homepageload'
            }
        },
        methods: { //方法

        },
        computed: { //计算 用来引入vuex里面state

        },
        mounted: function() { //组件加载完成

        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件

        }
    }
</script>
<style scoped>
    .careIcon {
        width: 16px;
        height: 16px;
        display: inline-block;
    }
    
    .careIcon img {
        max-width: 100%;
        height: auto;
    }
    
    figure {
        margin: 0;
        padding: 0;
    }
    
    figcaption {
        margin: 5px 10px;
    }
    
    .imageLi {
        width: 100%;
        margin-bottom: 15px;
        position: relative;
    }
    
    .imageLi img {
        min-height: 190px;
        height: 280px;
    }
    
    .housePic {
        margin-bottom: 10px;
    }
    
    .imageLi .price {
        font-size: 16px;
        font-family: "微软雅黑";
        background: #000;
        opacity: 0.6;
        filter: alpha(opacity=30);
        color: #fff;
        padding: 4px 10px;
        position: absolute;
        top: 20px;
    }
    
    .imageLi .address {
        font-size: 16px;
        font-family: "微软雅黑";
        color: #fff;
        position: absolute;
        bottom: 100px;
        right: 10px;
    }
    
    .picDescrip {}
    
    .picDescrip .picLeft {
        float: left;
        width: 78%;
    }
    
    .picLeft p {
        font-size: 16px;
    }
    
    .picLeft p.nameCN {
        color: #323232;
        font-family: "微软雅黑";
    }
    
    .picLeft p.nameEN {
        color: #999;
        font-family: "Arial";
    }
    
    .picDescrip .picRight {
        float: right;
        font-size: 16px;
        color: #333;
    }
    
    .picDescrip .picGeneral {
        clear: both;
        font-family: "微软雅黑";
        color: #999;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->